<template>
	<view>
		<nav-bar title="技师详情"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight, paddingBottom:'40rpx' }">
			<view>
				<view class="top-data">
					<view class="top">
						<view class="left">
							<image class="left-img" :src="technicianDetail.avatar" alt="" />
						</view>
						<view class="right">
							<view class="shop-name">
								<view class="name-left">
									<view class="name">{{ technicianDetail.name }}</view>
									<view class="certificate" @click="showCert">查看证书</view>
								</view>
							</view>
							<view class="score">
								综合评分：{{ Number(averageScore).toFixed(2) + '分' }}
							</view>
						</view>
					</view>
					<!-- <view style="width: 100%;display: flex;flex-wrap: wrap;">
						<view v-for="item in technicianScore">
							<view class="score" v-if="item.averageScore!=0">
								{{item.evaluateProblem}}：{{ item.averageScore+'分' }}
							</view>
						</view>
					</view> -->

					<view class="bottom">
						{{ technicianDetail.synopsis }}
					</view>
				</view>
				<view class="preview">
					<view class="common-title">
						<view class="box-line"></view>
						<view class="text">客户评价（显示最近{{technicianDetail.zyEvaluationRuleVo.scopeNum }}条）</view>
					</view>
					<view v-if="isLoading" class="common-loading">
						<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
					</view>
					<view class="evaluate" v-else-if="evaluateList && evaluateList.length">
						<view class="time-list" v-for="(item, index) in evaluateList" :key="index">
							<view class="left">
								<u-avatar :src="item.src"></u-avatar>
								<!-- <image class="time-img" :src="item.avatar" alt="" /> -->
							</view>
							<view class="right">
								<view class="top-title">{{ item.userName }}</view>
								<view class="">
									<view class="rate">
										<!-- <view>{{childItem.issue}}</view> -->
										<view style="display: flex;">
											<u-rate v-model="item.score" readonly
												active-color="rgba(255, 204, 94, 1)"></u-rate>
											<view style="margin-left: 12rpx;">{{item.score}}分</view>
										</view>
									</view>
								</view>
								<view class="des">{{ item.evaluateText }}</view>
							</view>
						</view>
					</view>
					<view v-else class="common-no-data">
						<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
						<view class="text">暂无评价</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="show" mode="center" @close="close">
			<view class="popup">
				<u-swiper height="100%" indicatorActiveColor="#fff" indicatorInactiveColor="#000" :list="list" indicator
					indicatorMode="line" circular></u-swiper>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NavBar from "../../components/nav-bar"
	import Search from '../../components/search/index'
	import shopList from "@/subPages/components/shopList"
	import api_technician from '@/api/technician'
	import pageConfig from '@/config'
	export default {
		name: "technicianDetail",
		components: {
			NavBar,
			Search,
			shopList
		},
		data() {
			return {
				show: false,
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				mainHeight: '',
				technicianDetail: {},
				technicianScore: null,
				evaluateList: [],
				isLoading: false,
				value: 5,
				count: 5,
				list: [],
				averageScore: ''
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
		},
		onLoad(options) {
			this.getDetail(options.id)
			// this.getComment(options.id)
			// this.getTechnicianScore(options.id)
		},
		methods: {
			showCert() {
				if (this.list.length == 0) {
					uni.showToast({
						title: '暂无证书~',
						icon: 'none'
					})
				} else {
					this.show = true
				}
			},
			close() {
				this.show = false
			},
			toNext() {
				uni.navigateTo({
					url: '/subPages/home/chooseMaster',
				})
			},
			getSorce(arr) {
				let sum = 0;
				for (let i = 0; i < arr.length; i++) {
					sum += Number(arr[i].score);
				}
				const average = parseInt(sum / arr.length);
				return average
			},
			getDetail(id) {
				api_technician.queryEvaluateByTechnicianId({
					technicianId: id
				}).then(res => {
					if (res.code !== 200) return
					this.technicianDetail = res.data
					console.log(this.technicianDetail,'this.technicianDetail');
					this.technicianScore = res.data.zyEvaluationRuleVo?.zyEvaluationRuleItemVos
					if (this.technicianScore) {
						const sum = this.technicianScore.reduce((sum, item) => sum + Number(item.averageScore), 0)
						// console.log(this.technicianScore);
						this.averageScore = sum / this.technicianScore.length
						// console.log(this.averageScore,sum,this.technicianScore.length);
					}

					if (res.data.zyTechnicianEvaluateVos && res.data.zyTechnicianEvaluateVos.length > 0) {
						this.evaluateList = res.data.zyTechnicianEvaluateVos
						this.evaluateList.map(el => {
							el.score = this.getSorce(el.zyTechnicianEvaluateItemVos)
						})
					}

					if (res.data.certificate) {
						this.list = res.data.certificate.split(",")
						console.log(this.list, 'this.list ');
					} else {
						this.list = []
					}
				})
			},
			// getComment(id) {
			// 	this.isLoading = true
			// 	const params = {
			// 		technicianId: id
			// 	}
			// 	api_technician.fetchTechnicianInfo(params).then(res => {
			// 		this.isLoading = false
			// 		if (res.code !== 200) return
			// 		this.technicianScore = res.data.score

			// 	}).catch(err => {
			// 		this.isLoading = false
			// 	})
			// },
			// getTechnicianScore(id) {
			// 	const params = {
			// 		technicianId: id
			// 	}
			// 	api_technician.fetchTechnicianScore(params).then((res) => {
			// 		this.technicianScore = res.data.score
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.top-data {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: 20rpx;
		padding: 46rpx 44rpx 31rpx 42rpx;

		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				position: relative;

				.left-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 15rpx;
				}
			}

			.right {
				width: 70%;

				.shop-name {
					display: flex;
					justify-content: space-between;
					margin-bottom: 14rpx;

					.name-left {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.certificate {
							color: #c27e15;
							font-weight: 600;
						}

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							height: 37rpx;
							line-height: 37rpx;
						}
					}
				}



				.shop-address {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(194, 126, 21, 1);
				}
			}
		}

		.score {
			display: inline-block;
			height: 58rpx;
			padding: 0 20rpx;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
			border-radius: 13rpx;
			line-height: 58rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(255, 50, 5, 1);
			background: rgba(255, 241, 238, 1);
			opacity: 1;
		}

		.bottom {
			line-height: 37.65rpx;
			word-break: break-all;
			font-size: 26rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(51, 51, 51, 1);
		}


	}

	.popup {
		width: 100vw;
		min-height: 62vh;
		background-color: #fff;
	}
	// ::v-deep .u-safe-bottom{
	// 	padding: 0 !important;
	// }

	.preview {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: 24rpx;
		width: calc(100% - 76rpx);

		.evaluate {
			width: 100%;

			.time-list {
				display: flex;
				border-bottom: 2rpx solid rgba(230, 230, 230, 1);
				padding: 15rpx 35rpx 28rpx;
				width: 100%;

				.left {
					display: flex;
					margin-bottom: 24rpx;

					.time-img {
						width: 89rpx;
						height: 89rpx;
						opacity: 1;
						border-radius: 50%;
						border: 1px solid;
					}

				}

				.right {
					color: rgba(102, 102, 102, 1);
					margin-left: 20rpx;

					.top-title {
						font-size: 32rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, 1);
						margin-bottom: 10rpx;
					}

					.rate {
						display: flex;
						justify-content: space-between;

					}

					.des {
						padding: 10rpx 0;
					}
				}
			}
		}
	}
</style>